<template>
  <div>

	<!-- <myheader :totalcount="this.totalcount()" :totalprice="this.totalprice()"></myheader> -->
	<myheader></myheader>
	<section class="featured-block text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-6 text-center">
					<div class="product-image mt-3" v-if="video">
						<video class="img-fluid" :src="video" controls autoplay></video>
					</div>
					<div class="product-image mt-3">
						<img class="img-fluid" :src="img">
					</div>
					<div class="product-thumbnails"><a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a></div>
				</div>
				<div class="col-md-6 mt-5 mt-md-2 text-center text-md-left">
					<h2 class="mb-3 mt-0">{{name}}</h2>
					<p class="lead mt-2 mb-3 primary-color">${{price}}</p>
					<h5 class="mt-4">Description</h5>
					<p>{{desc}}</p>
					<p>颜色：{{color}}</p>
					<p>薄厚：{{season}}</p>
					<p>标签：{{mytags}}</p>
					

					<p>Suspendisse potenti. Nunc in libero luctus, sagittis leo sit amet, volutpat lacus. Quisque a porta risus. Integer aliquet nibh vitae vestibulum accumsan</p>
					<h5 class="mt-5">Care Instructions</h5>
					<p>Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
					<select class="custom-select form-control mt-4 mb-4">
						<option selected>Size</option>
						<option value="1">Small</option>
						<option value="2">Medium</option>
						<option value="3">Large</option>
					</select>
					
					<!--Quantity: <input type="text" class="form-control quantity mb-4" name="" value="1">-->
					<Button class="btn btn-full-width btn-lg btn-outline-primary" @click="add_cart">加入购物车</Button><br><br>
					<Button class="btn btn-full-width btn-lg btn-outline-primary" @click="save" v-show="hide==1" v-model="type">关注</Button>
					<Button class="btn btn-full-width btn-lg btn-outline-primary" @click="nosave" v-show="hide==2" v-model="type">取消关注</Button>
					</div>
					
			</div>
		</div>
	</section>

	<div class="divider"></div>
	
	<section class="products text-center">
		<div class="container">
			<textarea v-model="content"></textarea>
			<br><br>
			<Button color='green' @click="comment">开始评论</Button>
		</div>
	</section>

	<div class="divider"></div>
	
	<section class="products text-center">
		<div class="container">
			<comments :commentlist="this.commentlist" :myuser="this.myuser"></comments>
            <!-- <p>商品评论</p>
			<ul v-for="(item,index) in commentlist" :key="index">
				<li>{{ item.uid | myfilter }}-{{item.content}}</li>
			</ul> -->
			<a @click="gopage(prev)">上一页</a>
			<a v-for="num in nums" @click="gopage(num)">{{num}}</a>
			<a @click="gopage(next)">下一页</a>
		</div>
	</section>
	<center>
		<div>
		关注数：{{count}}
		<br>
		人员名单：
		<ul v-for="(item, index) in attention" :key="index">
			<li>{{item.username}}</li>
		</ul>
		</div>
	</center>
	
	<div class="divider"></div>
	
	<section class="products text-center">
		<div class="container">
			<h3 class="mb-4">Related Products</h3>
			<div class="row">
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
			</div>
		</div>
	</section>
	
	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>
import myheader from './myheader';
import myfooter from './myfooter';
import comments from './comments'

export default {
	name:'item',
	data () {
    return {
		msg: "这是一个变量",
		name:'',
		//商品id
		gid:'',
		price:0,
		desc:'',
		img : '',
		video:'',
		color:'',
		season:'',
		cid:1,
		mytags:'',
		count:0,
		attention:[],
		// 页数列表
		nums:[],
		//上一页
		prev:1,
		//下一页
		next:1,
		
		//评论内容
		content:'',
		commentlist:'',
		//用户信息字典
		myuser:{},
		hide:1,
		type:1,
		//购物车变量
		cartlist:[]
    }
	},
	//自定义过滤器
  filters:{

  		//自定义方法
  		myfilter:function(value){

			//通过key(用户id)取用户名
			return window.that.myuser[value];

  		}

  },
    components:{
		'myheader':myheader,
		'myfooter':myfooter,
		'comments':comments
    },
    mounted:function(){
		//初始化购物车
  		this.init_cart();
		//获取商品排行
		this.axios.get("http://127.0.0.1:8000/goodsclick/",{params:{id:this.$route.query.gid}}).then(resp=>{
				
			})
		this.gopage()
		window.that = this;
		//调用用户列表
  		this.get_user();
		//获取商品的关注用户
		this.axios.get("http://127.0.0.1:8000/goodflow/",{params:{gid:this.$route.query.gid}}).then(resp=>{
				// console.log(resp)
				this.attention = resp.data
				this.count = resp.data.length
				console.log(this.guanzhu)
			})
		this.axios({
			url:'http://127.0.0.1:8000/gooditem/',
			params:{
				gid:this.$route.query.gid
			}
		}).then(resp=>{
			console.log(resp)
			this.name = resp.data.data.name
			this.price = resp.data.data.price
			this.desc = resp.data.data.desc
			this.img = 'http://127.0.0.1:8000/static/upload/'+resp.data.data.img
			this.video = 'http://127.0.0.1:8000/static/upload/'+resp.data.data.video
			var parms = resp.data.data.parms
			//转换类型
			parms = JSON.parse(parms)
			this.color = parms.color
			this.season = parms.season
			this.cid = resp.data.data.id
			// console.log(parms)
		})
		//请求商品标签详情
      	this.axios.get('http://localhost:8000/gettags/',{params:{id:this.$route.query.gid}}).then((result) =>{

      	console.log(result);

      	// 赋值
      	var mytags = result.data.tags;
      	mytags = mytags.join(",");
      	this.mytags = mytags;
      	//console.log(mytags);
    
		  })
		
    
},
  methods:{
	// //计算价格
  	// totalprice:function(){

  	// 	var total = 0;

  	// 	for(let i=0,l=this.cartlist.length;i<l;i++){

  	// 			total += (this.cartlist[i].num * this.cartlist[i].price/100);
  	// 	}

  	// 	return total;

  	// },

  	// //计算购物车总数
  	// totalcount:function(){

  	// 	var total = 0;

  	// 	for(let i=0,l=this.cartlist.length;i<l;i++){

  	// 			total += this.cartlist[i].num;
  	// 	}

  	// 	return total;

  	// },
	//初始化购物车逻辑
  	init_cart:function(){
		if(localStorage.getItem("cart")){
			//将localstorage的数据赋给cartlist
			this.cartlist = JSON.parse(localStorage.getItem("cart"));
		}else{
			this.cartlist = []
		}	

  	},
	//加入购物车逻辑
	add_cart(){
		
		var find = 0

		//遍历购物车
		for(let i=0,l=this.cartlist.length;i<l;i++){
			//如果找到了
			if(this.$route.query.gid == this.cartlist[i]['gid']){
				//将该商品的数量加1
				this.cartlist[i]['num']++;
				find = 1
				break
			}
		}
		//如果没找到
		if (find==0){
			//将该商品放入购物车列表
			this.cartlist.push({'name':this.name,'gid':this.$route.query.gid,'price':this.price,num:1,'img':this.img},)
		}
		console.log(this.cartlist);
		//存入localstorage
  		localStorage.setItem("cart",JSON.stringify(this.cartlist));
		this.$Message("添加购物车成功"); 
	},
	//评论方法
	comment(){
		//非空判断
		if(this.content == ""){

  			this.$Message("评论内容不能为空"); 
  			return false;

  		}
		this.axios.post('http://localhost:8000/insertcomment/',this.qs.stringify({content:this.content,uid:localStorage.getItem("uid"),gid:this.$route.query.gid})).then((result) =>{
		console.log(result);
		this.$Message(result.data.message); 
		if(result.data.code == 200){
			  
			//将评论内容和作者实时填充到评论容器中
            this.commentlist.unshift({"uid":localStorage.getItem("uid"),"content":this.content});
			this.content = ''; 
			this.$router.go(0)
			}         

        })
        // 	//发送请求 mongo
        // this.axios.get('http://localhost:8000/insertcomment_mongo/',{params:{content:this.content,uid:localStorage.getItem("uid"),gid:this.$route.query.gid}}).then((result) =>{

        // console.log(result); 
        // if(result.data.code == 200){
        //  this.$Message(result.data.message);   
        //  this.content = ''; 
        //    }         

        //   })
	},
	//调用所有用户列表
  	get_user:function(){

		//发送请求
		this.axios.get('http://localhost:8000/userlist/').then((result) =>{

		console.log(result);      

		//动态赋值

		for(let i=0,l=result.data.length;i<l;i++){

			this.myuser[result.data[i].id] = result.data[i].username;

		}

		console.log(this.myuser);

      });

	  },
	  gopage(num){
		//请求评论列表
      	this.axios.get('http://localhost:8000/commentlist/',{params:{id:this.$route.query.gid,page:num}}).then((result) =>{

      	console.log(result);

		this.commentlist = result.data.data
		this.nums = result.data.nums
		this.prev = result.data.prev
		this.next = result.data.next
    
		  })
	  },
	  save(){
		//请求关注列表
      	this.axios.get('http://localhost:8000/getflow/',{params:{uid:localStorage.getItem("uid"),gid:this.$route.query.gid,type:this.type}}).then((result) =>{

		console.log(result);
		this.$Message(result.data.message);
		this.hide = 2
		this.type = 2
	  })
	  },
	  nosave(){
		  //请求关注列表
      	this.axios.get('http://localhost:8000/getflow/',{params:{uid:localStorage.getItem("uid"),gid:this.$route.query.gid,type:this.type}}).then((result) =>{

		console.log(result);
		this.$Message(result.data.message);
		this.hide = 1
		this.type = 1
		 })
	  }
  }
}


</script>
 
<style>



</style>